import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Modal, Form, Input, Button, Select, DatePicker, Checkbox, Radio } from 'antd';
import PropTypes from 'prop-types';
const { Option } = Select;
const { RangePicker } = DatePicker;
@Form.create({ name: "dialogForm" })
class DialogForm extends Component {

	static propTypes = {
		dialogForm: PropTypes.array.isRequired,
		config: PropTypes.object, // dialog 配置
		disabledAll: PropTypes.bool, // 是否禁用
		handlerFn: PropTypes.func, // 提交的执行函数
	}

	state = {
		config: {
			title: '提示',
			modal: true,
			width: '40%',
			isLeftBut: true,
			closeOnClickModal: true,
			leftButText: '关 闭',
			rightButText: '确 定',
			visible: false
		},
		loading: false,
		visible: false
	};

	UNSAFE_componentWillMount () {
		this.setState({
			visible: true,
			config: {
				...this.state.config,
				...this.props.config
			}

		})
	}

	onCancel = () => {
		this.setState({
			visible: false,
		});
	}

	handleCancel = () => {
		this.props.form.resetFields();
		this.setState({
			visible: false,
		});
	};


	handleSubmit = e => {
		e.preventDefault();
		this.props.form.validateFields(async (err, values) => {
			if (!err) {
				this.setState({
					loading: true,
				}, () => {
					this.props.handlerFn(values, () => {
						this.props.form.resetFields();
						this.setState({
							loading: false,
							visible: false,
						});
					});
				})

			}
		});
	};


	// 获取回显示Value
	getValue = (key, type) => {
		if (this.props.result) {
			return this.props.result[key]
		}
		return null;
	}


	render () {
		const { getFieldDecorator } = this.props.form;
		const { title, leftButText, rightButText, width, modal, closeOnClickModal, isLeftBut } = this.state.config;
		const formItemLayout = {
			labelCol: {
				xs: { span: 24 },
				sm: { span: 5 },
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 12 },
			},
		};
		return (
			<Modal
				style={{ top: 20 }}
				className="dialog-form"
				title={title}
				mask={modal}
				closable={false} // TODO:设置点击无效无效，暂时未找到原因
				maskClosable={closeOnClickModal} // TODO:设置点击无效无效，暂时未找到原因
				width={width}
				visible={this.state.visible}
				footer={null}
			>
				<Form {...formItemLayout} onSubmit={this.handleSubmit}>
					{
						this.props.dialogForm.map(item => {
							if (item.type === 'text') {
								return (<Form.Item label={item.label} key={item.key}>
									{getFieldDecorator(item.key, {
										rules: item.rules,
										initialValue: this.getValue(item.key, item.type),
									})(
										<Input
											disabled={this.props.disabledAll}
											allowClear
											maxLength={item.maxLength}
											placeholder={item.placeholder}
										/>
									)}
								</Form.Item>)
							} else if (item.type === 'select') {
								return (<Form.Item label={item.label} key={item.key}>
									{getFieldDecorator(item.key, {
										rules: item.rules,
										initialValue: this.getValue(item.key, item.type),
									})(
										<Select
											disabled={this.props.disabledAll}
											style={{ width: 200 }}
											placeholder={item.placeholder}
										>
											{
												item.options.map(item => {
													return (<Option key={item.value} value={item.value}>{item.label}</Option>);
												})
											}
										</Select>
									)}

								</Form.Item>);
							} else if (item.type === 'radio') {
								return (
									<Form.Item label={item.label} key={item.key}>
										{getFieldDecorator(item.key, {
											rules: item.rules,
											initialValue: this.getValue(item.key, item.type),
										})(
											<Radio.Group
												disabled={this.props.disabledAll}
												placeholder={item.placeholder}>
												{
													item.options.map(item => {
														return (
															<Radio value={item.value} key={item.value}>{item.label}</Radio>
														)
													})
												}
											</Radio.Group>
										)}
									</Form.Item>
								)
							} else if (item.type === 'checkbox') {
								return (
									<Form.Item label={item.label} key={item.key}>
										{getFieldDecorator(item.key, {
											rules: item.rules,
											initialValue: this.getValue(item.key, item.type),
										})(
											<Checkbox.Group
												disabled={this.props.disabledAll}
												placeholder={item.placeholder}
											>
												{
													item.options.map(item => {
														return (
															<Checkbox value={item.value} key={item.value}>{item.label}</Checkbox>
														)
													})
												}
											</Checkbox.Group>
										)}
									</Form.Item>
								)
							} else if (item.type === 'date') {
								return <Form.Item label={item.label} key={item.key}>
									{getFieldDecorator(item.key, {
										rules: item.rules,
										initialValue: this.getValue(item.key, item.type),
									})(
										<DatePicker disabled={this.props.disabledAll}
											format={'YYYY-MM-DD'} placeholder={item.placeholder} />
									)}

								</Form.Item>;
							} else if (item.type === 'daterange') {
								return <Form.Item label={item.label} key={item.key}>
									{getFieldDecorator(item.key, {
										rules: item.rules,
										initialValue: this.getValue(item.key, item.type),
									})(
										<RangePicker disabled={this.props.disabledAll}
											format={'YYYY-MM-DD'} placeholder={item.placeholder} />
									)}
								</Form.Item>;
							}

						})
					}
					<div className="footer" style={{ textAlign: 'center' }}>
						{isLeftBut && <Button onClick={this.handleCancel}>{leftButText}</Button>}
						{
							this.props.disabledAll || <Button style={{ marginLeft: 10 }} type="primary" loading={this.state.loading} htmlType="submit">{this.state.loading ? '加载中请稍后...' : rightButText}
							</Button>
						}

					</div>
				</Form>
			</Modal>
		);
	}
}
DialogForm.service = function (props) {
	ReactDOM.render(React.createElement(DialogForm, props), document.createElement('div'));
}
export default DialogForm;
